<template>
  <div class="app-container">  
    <el-form :inline="true" :model="listQuery" class="demo-form-inline">
      <i class="el-icon-search btn-search" @click="handleShowSearch()"></i>
      <el-form-item label="合同编号">
        <el-input v-model="listQuery.contractNo" placeholder="合同编号"></el-input>
      </el-form-item>
      <el-form-item label="合同申请人">
        <el-input v-model="listQuery.contractApplicant" placeholder="合同申请人"></el-input>
      </el-form-item>
    
      <el-form-item label="PO状态">
        <el-select filterable v-model="listQuery.state" placeholder="请选择">
          <el-option label="未启动" value="1"></el-option>
            <el-option label="进行中" value="2"></el-option>
            <el-option label="已交付" value="3"></el-option>
                <el-option label="已验收" value="4"></el-option>
            <el-option label="已完结" value="5"></el-option>
            <el-option label="已终止" value="6"></el-option>
            <el-option label="已过期" value="7"></el-option>
        </el-select>
      </el-form-item>
     

      <el-form-item>
        <el-button  type="primary" plain  @click="getList()">查询</el-button>
      
    
           <el-button
             :disabled='list.length<=0'
          type='primary'
            icon="el-icon-document"
            
          >导出excel</el-button>
      </el-form-item>
    </el-form>
    <p style="color:red;margin-top: -18px;">*您有{{total}}条新结算单带完整数据</p>
    <el-table
       v-loading="listLoading"  border
 height='650px'
      :data="list"
          fit
       highlight-current-row
      style="width: 100%"
    >
      <el-table-column align="center" width='60px' label="序号">
        <template slot-scope="scope">
          <span>{{scope.$index+1 }}</span>
        </template>
      </el-table-column>
      <el-table-column type="selection" width="55"></el-table-column>
         <el-table-column align="center" width='60px'  label="序号">
        <template slot-scope="scope">
          <span>{{ scope.$index+1 }}</span>
        </template>
      </el-table-column>
        <el-table-column align="center" label="PO单号">
        <template slot-scope="{row}">
          <span>{{ row.province }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="课程ID">
        <template slot-scope="{row}">
          <span>{{ row.region }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width='180px' label="供应商类型">
        <template slot-scope="{row}">
          <span>{{ row.po }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="供应商名称">
        <template slot-scope="{row}">
          <span>{{ row.supplierName }}</span>
        </template>
      </el-table-column>
   <el-table-column align="center" width='350px' label="课程名称">
        <template slot-scope="{row}">
          <span>{{ row.courseName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="200px" label="客户名称">
        <template slot-scope="{row}">
          <span>{{ row.customerName }}</span>
        </template>
      </el-table-column>
      <el-table-column sort align="center" width='180px' label="合同金额">
        <template slot-scope="{row}">
          <span>{{ row.createTime | parseTime('{y}-{m}-{d} {h}:{i}')  }}</span>
        </template>
      </el-table-column>
    
   
      <el-table-column align="center" width='350px' label="课程编导">
        <template slot-scope="{row}">
          <span>{{ row.courseChargeName }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="服务类型">
        <template slot-scope="{row}">
          <span>{{ row.serviceTypeName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"  width='120px'   label="单价">
        <template slot-scope="{row}">
          <span>{{ row.unitPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"  width='120px'  label="数量">
        <template slot-scope="{row}">
          <span>{{ row.quantity }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center"  width='120px'  label="预估成本">
        <template slot-scope="{row}">
          <span>{{ row.estimatedGenerationCost }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"  width='120px'  label="已交付时长（分钟）">
        <template slot-scope="{row}">
          <span>{{ row. contractFinishedTimeLength }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"  width='120px'  label="已支付">
        <template slot-scope="{row}">
          <span>{{ row.contractUnfinishedTimeLength }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="预估成本未支付">
        <template slot-scope="{row}">
          <span>{{ row.contractPaymentReceived }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="实际单价">
        <template slot-scope="{row}">
          <span>{{ row.email }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="实际数量">
        <template slot-scope="{row}">
          <span>{{ row.contractOutstandingPayment }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="其他费用">
        <template slot-scope="{row}">
          <span>{{ row.copyrightOwnership }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="实际总成本">
        <template slot-scope="{row}">
          <span>{{ row.copyrightFee }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="实际时长（分钟）">
        <template slot-scope="{row}">
          <span>{{ row.businessSundryFee }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" width='100px' label="支付状态">
        <template slot-scope="{row}">
          <span>{{ row.contractPurchaseAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="发票类型">
        <template slot-scope="{row}">
          <span>{{ row.contractGrossProfit }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center"  width='100px'  label="税点">
        <template slot-scope="{row}">
            <span>{{ row.forecastGrossProfitRate }}</span>
          <!-- <el-switch
           active-color="#d9d9d9"
           inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
            @change="handleState(row)"
            v-model="row.forecastGrossProfitRate"
          ></el-switch> -->
        </template>
      </el-table-column>
      <el-table-column class-name="status-col"  width='120px'  label="拍摄素材">
        <template slot-scope="{row}">
          <el-tag>{{ row.estimatedGenerationCost }}</el-tag>
        </template>
      </el-table-column>
         <el-table-column align="center" label="工程归档">
        <template slot-scope="{row}">
          <!-- <span>{{ row.state   }}</span> -->
           <el-tag
            :type="row.contractState | statusColorFilter"
          >{{ row.state | statusFilter}}</el-tag>
        </template>
      </el-table-column>
         <el-table-column align="center"  width='120px'  label="净版归档">
        <template slot-scope="{row}">
          <span>{{ row.afterSalePeriod }}</span>
        </template>
      </el-table-column>
            <el-table-column align="center"  width='120px'  label="归档时间">
        <template slot-scope="{row}">
          <span>{{ row.afterSalePeriod }}</span>
        </template>
      </el-table-column>
            <el-table-column align="center"  width='120px'  label="预估结算日期">
        <template slot-scope="{row}">
          <span>{{ row.afterSalePeriod }}</span>
        </template>
      </el-table-column>
         <el-table-column align="center"  width='120px'  label="结款日期">
        <template slot-scope="{row}">
          <span>{{ row.afterSalePeriod }}</span>
        </template>
      </el-table-column>
         <el-table-column align="center"  width='120px'  label="更新日期">
        <template slot-scope="{row}">
          <span>{{ row.afterSalePeriod }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"   fixed='right'  label="操作" width="150">
        <template slot-scope="{row}">
           <el-button
            type="warning"
            @click="handleEdit(row)"
            size="mini"
           :disabled='editDisabled==true'   icon="el-icon-edit"
          >入库</el-button>
          <el-button
            type="primary"
            @click="handleEdit(row)"
            size="mini"
           :disabled='editDisabled==true'   icon="el-icon-edit"
          >编辑</el-button>

         
          <el-button
            @click="handleDel(row.id)"
            class="mg-l"
            type="danger"
            size="mini"
            icon="el-icon-delete"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog @close='handleClose' :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑用户':'添加用户'">
      <el-form label-width="80px" ref="poesList" :model="poesList" label-position="left">
        <el-form-item label="用户账号">
          <el-input v-model="poesList.memberName" placeholder="请输入用户账号" />
        </el-form-item>
        
        <el-form-item label="真实姓名">
          <el-input v-model="poesList.name" placeholder="请输入真实姓名" />
        </el-form-item>
        <el-form-item label="初始密码">
          <el-input v-model="poesList.password" placeholder="请输入密码" />
        </el-form-item>
           <el-form-item label="性别">
           <el-radio-group v-model="poesList.sex">
            <el-radio label="1">男</el-radio>
            <el-radio label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="poesList.mobile" placeholder="请输入手机号" />
        </el-form-item>
         <el-form-item label="邮箱">
          <el-input v-model="poesList.email" placeholder="请输入邮箱" />
        </el-form-item>
     
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmRole">确定</el-button>
      </div>
    </el-dialog>
    
    <pagination
      v-show="total>=20"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  infoPos,
  posList,
  contractsList,
  updatePos,
  addContract,
  updateContracts,
 delPos
  
} from "@/api/supplier";
import { roleList } from "@/api/role";
import { Message } from "element-ui";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

export default {
  name: "posList",
  components: { Pagination },
  filters: {
        statusColorFilter(status) {
      const statusMap = {
        1: "success",
        2: "danger",
        3: "warning",
        4: "info",
        5: " ",
      };
      return statusMap[status];
    },
    statusFilter(status) {
      const statusMap = {
        1: "进行中",
        2: "已完成",
        3:'已过期',
        0:'新合同'
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      showbtns: false,
      list: [], editDisabled:false,

      downloadLoading:false,
      poesList: {
        memberName: "", //	用户账号

        password: "", //	用户密码

        name: "", //	真实姓名

        mobile: "", //	用户手机号

        email: "", //用户邮箱

        sex:'1', //性别
      },
      total: 0,
      dialogVisibleMenu: false,
      listLoading: true,
      listQuery: {
        access_token: sessionStorage.getItem("token"),
        page: 1,

        name: "",

        state: "",
        pageSize: 20,
      },
      
      userId: "", //用户id
      rolesList:[],
      
      dialogVisible: false,
      dialogType: "new",
      checkStrictly: false,
     
      ids: "",
    };
  },
  created() {
    this.getList();
   
  },
  computed: {
   
  },
 methods: {
      handleClose(){
      this.editDisabled = false;
    },
    handleShowSearch() {
      this.showbtns = !this.showbtns;
    },
   
       getList() {
       this.editDisabled = false;
      this.listLoading = true;
      posList(this.listQuery)
        .then((response) => {
          this.list = response.data.data.rows;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    handleDel(id) {
      this.$confirm("确定删除该数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {
          delPos(id).then((res) => {
            if (res.data.code == "200") {
              this.$message.success(res.data.message);
              this.getList();
            } else {
              this.$message.error(res.data.message);
            }
          });
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
   

    confirmRolePerm() {
      this.checkStrictly = true;

      let checkedList = this.$refs.tree.getCheckedKeys();
      let res = [];
      if (checkedList.length > 0) {
        checkedList.forEach((r) => {
          res.push(r);
        });
        this.ids = res.join(",");
      }

       
      let data = {
        permissionIds: this.ids,
      };
      updatePosPermission(this.userId, data).then((res) => {
        if (res.data.code == "200") {
          this.$message.success(res.data.message);
          this.dialogVisibleMenu = false;
          this.getList();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    handlenewContract() {
   
      this.dialogType = "new";
      this.dialogVisible = true;
      // this.poesList='';
    },
      handleEdit(row) {
       this.editDisabled=true;
      this.dialogType = "edit"
      this.dialogVisible = true;
      
      this.poesList=row
     // this.userId = scope.id;
    },
    confirmRole(id) {
     const isEdit = this.dialogType ==="edit";
      if (isEdit) {
        let data = {
          name: this.newName,
        };
        updatePos(this.userId, data).then((res) => {
          if (res.data.code == "200") {
            this.$message.success(res.data.message);
            this.dialogVisible = false;
            this.getList();
             this.editDisabled=false;
          } else {
            this.$message.error(res.data.message);
          }
        });
        return false;
      }
      let _this = this;
      let data={

      }
      console.log(this.poesList)
      addUser(this.poesList).then((res) => {
        console.log(res);
        if ((res.code = "200")) {
          this.$message.success(res.data.message);
          //     Message({
          //   message: res.data.message ,
          //   type: 'success',
          //   duration: 5 * 1000
          // })
          _this.dialogVisible = false;
          _this.posList = "";
          _this.getList();
        }
      });
    },
    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then((excel) => {
        const tHeader = ["Id", "Title", "Author", "Readings", "Date"];
        const filterVal = [
          "id",
          "title",
          "author",
          "pageviews",
          "display_time",
        ];
        const list = this.list;
        const data = this.formatJson(filterVal, list);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType,
        });
        this.downloadLoading = false;
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },
  },
};
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
